﻿<FluentStack>
    <FluentCounterBadge Count="100" Appearance="Appearance.Accent">
        <FluentButton>
            <FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="@Color.Neutral" />
        </FluentButton>
    </FluentCounterBadge>

    <FluentSpacer Width="25" />

    <FluentCounterBadge Count="5"
                        Appearance="Appearance.Neutral"
                        HorizontalPosition="-25"
                        BottomPosition="-25">
        <FluentButton Appearance="Appearance.Accent">
            <FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="@Color.Fill" />
        </FluentButton>
    </FluentCounterBadge>

    <FluentSpacer Width="25" />

    <FluentCounterBadge Count="5" Appearance="Appearance.Lightweight">
        <FluentButton Appearance="Appearance.Accent">
            <FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="@Color.Fill" />
        </FluentButton>
    </FluentCounterBadge>

    <FluentSpacer Width="25" />

    <FluentCounterBadge Count="5" Appearance="Appearance.Lightweight" BackgroundColor="Color.Lightweight" Color="Color.Error">
        <FluentButton Appearance="Appearance.Accent">
            <FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="@Color.Fill" />
        </FluentButton>
    </FluentCounterBadge>

    <FluentSpacer Width="25" />


    <FluentCounterBadge Count="9" BackgroundColor="@Color.Error" Color="Color.Fill">
        <FluentButton Appearance="Appearance.Neutral">
            <FluentIcon Value="@(new Icons.Regular.Size24.Mail())" Color="@Color.FillInverse" />
        </FluentButton>
    </FluentCounterBadge>
</FluentStack>
